<template>
  <div class="contact-page">
    <section class="page-header">
      <div class="container">
        <h1 class="page-title" data-aos="fade-up">联系我</h1>
        <p class="page-description" data-aos="fade-up" data-aos-delay="100">
          有问题或项目合作意向？请随时联系我
        </p>
      </div>
    </section>

    <section class="section contact-section">
      <div class="container">
        <div class="contact-wrapper">
          <div class="contact-info" data-aos="fade-right">
            <h2 class="section-title">联系信息</h2>
            <p class="contact-text">
              无论您有任何问题、项目合作意向或者只是想打个招呼，我都很乐意听取并回复您的信息。以下是我的联系方式：
            </p>
            
            <div class="contact-details">
              <div class="contact-item" v-for="(item, index) in contactInfo" :key="index">
                <div class="contact-icon">
                  <i :class="item.icon"></i>
                </div>
                <div class="contact-content">
                  <h3>{{ item.title }}</h3>
                  <p>{{ item.value }}</p>
                </div>
              </div>
            </div>
            
            <div class="social-links">
              <a href="#" class="social-link" aria-label="GitHub">
                <i class="fab fa-github"></i>
              </a>
              <a href="#" class="social-link" aria-label="LinkedIn">
                <i class="fab fa-linkedin"></i>
              </a>
              <a href="#" class="social-link" aria-label="Twitter">
                <i class="fab fa-twitter"></i>
              </a>
              <a href="#" class="social-link" aria-label="Instagram">
                <i class="fab fa-instagram"></i>
              </a>
            </div>
          </div>
          
          <div class="contact-form-wrapper" data-aos="fade-left">
            <form class="contact-form" @submit.prevent="submitForm">
              <h2 class="section-title">发送消息</h2>
              
              <div class="form-group">
                <label for="name">姓名</label>
                <input 
                  type="text" 
                  id="name" 
                  v-model="formData.name" 
                  required 
                  placeholder="您的姓名"
                >
              </div>
              
              <div class="form-group">
                <label for="email">邮箱</label>
                <input 
                  type="email" 
                  id="email" 
                  v-model="formData.email" 
                  required 
                  placeholder="您的邮箱地址"
                >
              </div>
              
              <div class="form-group">
                <label for="subject">主题</label>
                <input 
                  type="text" 
                  id="subject" 
                  v-model="formData.subject" 
                  required 
                  placeholder="消息主题"
                >
              </div>
              
              <div class="form-group">
                <label for="message">消息</label>
                <textarea 
                  id="message" 
                  v-model="formData.message" 
                  required 
                  rows="5" 
                  placeholder="请输入您的消息"
                ></textarea>
              </div>
              
              <button type="submit" class="submit-btn">
                发送消息
                <i class="fas fa-paper-plane"></i>
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>

    <section class="section map-section">
      <div class="map-container" data-aos="zoom-in">
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3021.6966124018735!2d116.40742851532766!3d39.91590597942788!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x35f052b9318a7d43%3A0x5a49436996e34d2c!2s%E5%8C%97%E4%BA%AC%E5%B8%82%E4%B8%AD%E5%BF%83!5e0!3m2!1szh-CN!2scn!4v1597212187201!5m2!1szh-CN!2scn"
          width="100%"
          height="450"
          style="border:0;"
          allowfullscreen=""
          loading="lazy"
        ></iframe>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'Contact',
  data() {
    return {
      contactInfo: [
        {
          title: '电子邮箱',
          value: 'contact@example.com',
          icon: 'fas fa-envelope'
        },
        {
          title: '电话',
          value: '+86 123 4567 8910',
          icon: 'fas fa-phone-alt'
        },
        {
          title: '地址',
          value: '中国北京市朝阳区某某大厦',
          icon: 'fas fa-map-marker-alt'
        }
      ],
      formData: {
        name: '',
        email: '',
        subject: '',
        message: ''
      }
    };
  },
  methods: {
    submitForm() {
      // 这里可以添加表单提交逻辑
      alert('感谢您的消息！我会尽快回复。');
      this.formData = {
        name: '',
        email: '',
        subject: '',
        message: ''
      };
    }
  }
};
</script>

<style scoped lang="scss">
.page-header {
  padding: 8rem 0 4rem;
  background: linear-gradient(to right, rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.8)), url('https://via.placeholder.com/1920x1080') no-repeat center/cover;
  text-align: center;
  
  .page-title {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .page-description {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.7;
  }
}

.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  
  @media (max-width: 992px) {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.contact-info {
  .contact-text {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 2rem;
  }
  
  .contact-details {
    margin: 2.5rem 0;
    
    .contact-item {
      display: flex;
      margin-bottom: 1.5rem;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .contact-icon {
        flex: 0 0 50px;
        height: 50px;
        border-radius: 50%;
        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1.5rem;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        
        i {
          color: #fff;
          font-size: 1.2rem;
        }
      }
      
      .contact-content {
        h3 {
          font-size: 1.1rem;
          color: var(--text-color);
          margin-bottom: 0.3rem;
        }
        
        p {
          color: var(--text-muted);
        }
      }
    }
  }
  
  .social-links {
    display: flex;
    gap: 1rem;
    
    .social-link {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.03);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      font-size: 1.2rem;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-5px);
        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
        color: #fff;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      }
    }
  }
}

.contact-form-wrapper {
  .contact-form {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    padding: 3rem;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    }
    
    .form-group {
      margin-bottom: 1.5rem;
      
      label {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--text-color);
        font-weight: 500;
      }
      
      input, textarea {
        width: 100%;
        padding: 0.8rem 1rem;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.03);
        color: var(--text-color);
        font-size: 1rem;
        transition: all 0.3s ease;
        
        &:focus {
          outline: none;
          border-color: var(--secondary-color);
          box-shadow: 0 0 0 3px rgba(196, 113, 237, 0.1);
        }
        
        &::placeholder {
          color: rgba(255, 255, 255, 0.3);
        }
      }
      
      textarea {
        resize: vertical;
        min-height: 120px;
      }
    }
    
    .submit-btn {
      display: inline-flex;
      align-items: center;
      padding: 0.8rem 2rem;
      background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
      border: none;
      border-radius: 30px;
      color: #fff;
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      
      i {
        margin-left: 0.8rem;
      }
      
      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
      }
    }
  }
}

.map-section {
  padding-top: 0;
  
  .map-container {
    height: 450px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  }
}

@media (max-width: 768px) {
  .page-header {
    padding: 6rem 0 3rem;
    
    .page-title {
      font-size: 2.2rem;
    }
  }
  
  .contact-form-wrapper {
    .contact-form {
      padding: 2rem;
    }
  }
}

@media (max-width: 576px) {
  .contact-info {
    .contact-item {
      flex-direction: column;
      
      .contact-icon {
        margin-bottom: 1rem;
        margin-right: 0;
      }
    }
  }
}
</style> 